<template>
      <div>
          <div class="banner">
            <img src="http://img1.qunarzz.com/sight/p0/1606/21/215ec8ab1e612e38e2.water.jpg_375x170_9a32c907.jpg" alt="">
            <div class="ban_jtou" @click="jtouClick">
              <span class="iconfont icon-zuojiantou"></span>
            </div>
            <div class="ban_hot">
                <div class="ban_t">
                  <span class="ban_line"></span>
                  <span class="iconfont icon-diqiu star"></span>
                  <h2>西安</h2>
                  <span class="iconfont icon-diqiu star-t"></span>
                  <span class="ban_line_t"></span>
                </div>
               <h1>本周热门榜单</h1>
            </div>
          </div>
      </div>
</template>

<script>
    export default {
        name: "banner",
        methods:{
          jtouClick(){
            this.$router.push('/')
          }
        }
    }
</script>

<style scoped lang="stylus">
  .banner{
    height:0;
    padding-bottom:45%;
    position: relative;
    .ban_img{
      width:100%;
    }
    .ban_jtou{
      width:.36rem;
      line-height:.36rem;
      background:black;
      opacity:.5;
      border-radius:50%;
      position :absolute;
      top:.1rem;
      left :.1rem;
      text-align :center;
      span{
        color:white;
        font-size:.25rem;
      }
    }
    .ban_hot{
      .ban_t {
        display :flex;
        color :white;
        h2 {
          font-size: .18rem;
          margin-left :.2rem;
          position :absolute;
          top:35%;
          left :40%;
        }
        .ban_line {
          display: inline-block;
          position :absolute;
          top:40%;
          left :20%;
          width: 0;
          height: 0;
          border-top: 1px solid transparent;
          border-right: .6rem solid #fff;
          border-bottom: 1px solid transparent;
        }
        .ban_line_t{
          display: inline-block;
          position :absolute;
          top:40%;
          left :63%;
          width: 0;
          height: 0;
          border-top: 1px solid transparent;
          border-left: .6rem solid #fff;
          border-bottom: 1px solid transparent;
        }
        .star{
          display: inline-block;
          position :absolute;
          top:35%;
          left :39%;
        }
        .star-t {
          display: inline-block;
          position :absolute;
          top:35%;
          left :57%;
        }
      }
    }
    h1{
      position :absolute;
      top:45%;
      left :25%;
      font-size :.3rem;
      color :white;
    }
  }
</style>
